<template>
	<view>
    <view v-for="(item,index) in detailList" class="flex items-center" style="border-bottom: 2px dashed #eee;padding: 10px;">
<!--      <text class="mr-20r" style="font-size: 18px;font-weight: bold">{{ index + 1 }}</text>-->
      <text class="iconfont p-16r mr-20r" :class="item.icon"
            :style="{backgroundColor:item.type === 0? systemTheme.outColor:systemTheme.inColor}"
            style="font-size: 30px; border-radius:50%;color: white;"></text>
      <view class="flex-auto flex flex-column py-20" style="width: 100px">
        <text>{{ item.title }}</text>
        <text class="flex-auto px-3 text-12"  style="color: #999;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{item.remark}}</text>
      </view>
      <view class="flex items-center">
        <view class="flex flex-column items-end ml-10">
          <text class="text-333 mb-6">￥{{ formatMoney(item.num) }}</text>
          <text class="text-12" style="color: #999;"> {{ item.create_time_str }}</text>
        </view>
<!--        <text class="iconfont icon-right ml-6 text-333"></text>-->
      </view>
    </view>
	</view>
</template>

<script>
	import {getRankDetail,getRankByDate} from '@/api/api.js';
	import {fmtNum,formatMoney} from '@/common/format.js';
  import dayjs from 'dayjs';
  import {useSystem} from "@/store/theme";
	export default {
		data() {
			return {
				list:[],
        detailList:[]
			}
		},
    setup() {
      const systemTheme = useSystem()
      return {systemTheme}
    },
	  async	onLoad(options) {
		  let {type,type_id,type_title,date_type,year,month,day,chart_type} = options
		  // const txt = type_title+(type==='1'?'收入':'支出')+'-'+ (date_type==='0'?`${date_value.split('-')[0]}年第${date_value.split('-')[1]}周`:date_type==='1'?`${date_value.split('-')[0]}年${date_value.split('-')[1]}月`:`${date_value}年`)
		  // // console.log(txt)
			// uni.setNavigationBarTitle({
			// 	title:txt
			// })

      uni.setNavigationBarColor({
        backgroundColor: this.systemTheme.bg //背景颜色值，有效值为十六进制颜色
      })

      if (month === 'null'){
        month = null
      }

      if (day === 'null'){
        day = null
      }

      let detailList = []

      if (chart_type === '1'){
        detailList= await getRankDetail(type_id,year,month,day)
      }else if(chart_type === '2'){
        detailList = await getRankByDate(type,year,month,day,null,null)
      }

      if (detailList) {
        detailList.forEach(item => {
          item.create_time_str = dayjs(item.create_time).format('M月D日 HH:mm:ss')
        })
      }

      this.detailList = detailList
			const monArr = [],dataList=[]


			for (let item of detailList) {

				if(monArr.indexOf(item.mon)===-1) {
					monArr.push(item.mon)
					dataList.push({
						date:item.mon,
						list:detailList.filter(listItem => listItem.mon===item.mon)
					})
				}
			}



			this.list = dataList
			
		},
		methods: {
			formatMoney(num) {
				return formatMoney(num)
			},
			getWeekText(mon_date) {
				const weekTxt = ['日','一','二','三','四','五','六']
				// const year = this.datePickerValue.split('-')[0]
				const date = new Date('2024-'+mon_date)
				
				return weekTxt[date.getDay()]
			},
		}
	}
</script>

<style lang="scss">
	.detail-item {
		border-bottom: 2px dashed #eee;
		padding-bottom: 6px;
		&:last-child {
			margin-bottom: 0;
			border: none;
		}
	}
</style>
